<template>
  <!-- 评分卡页面 -->
  <div class="box">
    <div class="box1">评分卡</div>
    <div class="Big_box">
      <div class="box2">
        <el-input
          v-model="input"
          class="w-50 m-2"
          placeholder="请输入要查询的评分卡名称"
          :prefix-icon="Search"
          size="small"
        />
        <el-dropdown>
          <span class="el-dropdown-link">
            状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu color="#f5f5f5">
              <el-dropdown-item command="a">全部</el-dropdown-item>
              <el-dropdown-item command="b">启用</el-dropdown-item>
              <el-dropdown-item command="c">禁用</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-row class="mb-4">
          <el-button color="rgb(78, 171, 254)" @click="cha(value)"
            >查询</el-button
          >
          <el-button @click="chong()">重置</el-button>
        </el-row>
        <el-button text @click="dialogFormVisible = true">
          <el-icon><Plus />新增</el-icon>
        </el-button>
        <el-dialog v-model="dialogFormVisible" title="新增评分卡">
          <el-form :model="form">
            <el-form-item label="评分卡名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                添加
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      <div class="box3">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="caScorecardid" label="序号" width="180" />
          <el-table-column
            prop="caScorecardname"
            label="评分卡名称"
            width="200"
          />
          <el-table-column prop="caState" label="状态" />
          <el-table-column prop="caScorecardsc" label="分值" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-row class="mb-4">
                <el-button text @click="push">
                  <el-button
                    ><el-icon :size="20" color="#409EFC"
                      ><Edit /></el-icon></el-button
                ></el-button>
                <el-button text @click="shanchu(scope.row.caScorecardid)">
                  <el-button
                    ><el-icon :size="20" color="#409EFC"
                      ><Delete /></el-icon></el-button
                ></el-button>
                <el-button text @click="push">
                  <el-button
                    ><el-icon :size="20" color="#409EFC"
                      ><View /></el-icon></el-button
                ></el-button>
                <el-switch v-model="value" />
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="demo-pagination-block">
        <el-pagination
          :v-model:current-page="currentPage4"
          :v-model:page-size="pageSize4"
          :page-sizes="[5, 10, 15, 25]"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="23"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
// import { ref } from "vue";
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { onMounted } from "vue";
import service from "@/apis";
import { Delete } from "@element-plus/icons-vue";

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

var input = ref();
const value = ref(true);
const tableData = ref();
var formref = ref();

const form = reactive({
  name: "",
  type: [],
});

onMounted(async () => {
  var res = await service.card.pingfenka_moke();
  console.log(res.data);
  tableData.value = res.data.data;
});

var push = ref();

var cha = async (value) => {
  console.log(input.value);
  var res = await service.card.pingfenka_cha({ caScorecardname: input.value });
  console.log(res.data);
  tableData.value = res.data.data;
};


var chong = async () => {
  var res = await service.card.pingfenka_cha();
  console.log(res.data);
  tableData.value = res.data.data;
  input.value = "";
};

var shanchu = async (row) => {
  // console.log(row);
  var res = await service.card.pingfenka_delete({ id: row });
  console.log(res.data.data);
  tableData.value = res.data.data;
  var res = await service.card.pingfenka_moke();
  console.log(res.data.data);
  tableData.value = res.data.data;
};
const pageSize4 = ref(100);
const currentPage4 = ref(4);
const background = ref(true);
</script>

<style scoped lang="scss">
.box1 {
  height: 30px;
  width: 100px;
  text-align: center;
  line-height: 30px;
  background-color: rgb(78, 171, 254);
  border-radius: 15px;
}
.box2 {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.box2 .el-input {
  width: 250px;
}
.demo-pagination-block {
  display: flex;
  justify-content: space-around;
}

.el-button {
  padding: 0 10px;
}
</style>